<template>
  <view class="containerss">
    <view class="department-treess">
      <department-item :department="department" v-for="(department, index) in departmentList" :key="index" @select-sub-department="handleSelectSubDepartment"></department-item>
    </view>
    <view class="container">
      <view class="doctor-list-wrapper">
        <view class="doctor-info" v-for="(doctor, index) in dataList" :key="index">
          <view class="doctor-left">
            <image class="doctor-avatar" :src="doctor.profilePic" mode="aspectFill" @click="xq(doctor)"></image>
          </view>
          <view class="doctor-right">
            <view class="doctor-detail">
              <text class="doctor-name">{{ doctor.name }}</text>
              <view class="doctor-meta">
                <text class="doctor-title" style="color: red;">{{ doctor.hospitalName }}</text>
                <text class="doctor-specialty">{{ doctor.departmentsName }}</text>
              </view>
              <view class="doctor-hospital-info">
                <text class="doctor-hospital">{{ doctor.hospital }}</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 0">三甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 1">二甲医院</text>
                <text class="hospital-level" v-if="doctor.hospitalLevel === 2">一甲医院</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>


<script>
import { getTree } from '@/api/departments/departments.js';
import DepartmentItem from './DepartmentItem.vue';
import {findByDepartmentsId, getDoctor} from "@/api/doctor/doctor";


export default {
  components: {
    DepartmentItem
  },
  data() {
    return {
      dataList:[],
      queryParam: {
        pageNum: 1,
        pageSize: 400,
        name: null,
        sex: null,
        birthDate: null,
        phone: null,
        address: null,
        licenseNumber: null,
        licenseissueDate: null,
        licenseExpireDate: null,
        hospitalId: null,
        departmentId: null,
        bio: null,
        profilePic: null,
        status: null
      },

      departmentList: [],
      selectedDepartments: []
    };
  },


  onLoad() {
    this.getList();
    this.getDoctors();
  },


  methods: {


    getDoctors(){
      this.loading = true;
      getDoctor(this.queryParam).then(response => {
        this.dataList = response.data.rows;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    getList() {
      getTree().then(res => {
        const adjustData = res.data.map(department => ({
         ...department,
          subDepartments: department.childrenList,
          selected: false
        }));
        this.departmentList = adjustData;
      }).catch(err => {
        console.error('获取科室树数据失败：', err);
      });
    },


    async handleSelectSubDepartment(departmentsId) {
      try {
        const response = await findByDepartmentsId(departmentsId);
        this.dataList = response.data;
      } catch (error) {
        console.error('根据科室 ID 获取医生数据失败：', error);
      }
    },


    xq(doctor) {
      console.log(doctor);
    }
  }
};
</script>


<style scoped>


  /* 医生列表容器样式 */
.doctor-list-wrapper {
    display: flex;
    flex-direction: column;
    background-color: #f9f9f9;
    padding: 3px;
    border-radius: 8px;
  }

/* 医生信息块样式 */
.doctor-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 头像左侧容器样式 */
.doctor-left {
  flex: 0 0 100px; /* 固定宽度为100px */
  margin-right: 15px;
}

/* 头像样式 */
.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 文字信息右侧容器样式 */
.doctor-right {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

/* 医生详细信息样式 */
.doctor-detail {
  width: 100%;
}

/* 医生姓名样式 */
.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 医生元信息样式（医院名称和科室） */
.doctor-meta {
  margin-bottom: 15px;
}

.doctor-title {
  font-size: 16px;
  color: red;
  margin-bottom: 5px;
}

.doctor-specialty {
  font-size: 14px;
  color: #555555;
}

/* 医生医院信息样式 */
.doctor-hospital-info {
  width: 100%;
}

.doctor-hospital {
  font-size: 16px;
  margin-bottom: 5px;
}

.hospital-level {
  font-size: 14px;
  color: #333333;
  margin-top: 2px;
}



.containerss {
  padding: 20px;
  background-color: #f5f5f5;
}
.department-treess {
  margin-top: 20px;
}
.selected-departmentss {
  margin-top: 20px;
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


.container {
    padding: 20px;
    background-color: #f5f5f5;
  }
.department-tree {
    margin-top: 20px;
  }
.selected-departments {
    margin-top: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>
